<extend name="work/base"/>
<block name="body">
    <script type="text/javascript" src="https://cdn.weibuyun.com/static/admin/js/echarts.min.js"></script>
    <div class="layui-card">
        <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="projecttab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="1">概况</li>
                <li lay-id="2">紧要任务</li>
                <li lay-id="3">任务视图</li>
            </ul>
            <div class="layui-tab-content" style="background-color: #f2f2f2">
                <div class="layui-tab-item layui-show" >
                    <div class="layui-card" >
                        <div class="layui-card-header"><i class="layui-icon layui-icon-log"
                                                          style="font-size: 20px; color: #FFB800;"></i> 工作考勤
                        </div>
                        <div class="layui-card-body">
                            <blockquote class="layui-elem-quote layui-quote-nm">{:config('param.work_time')}
                            </blockquote>
                            <div class="layui-btn-group">
                                <button type="button"
                                        class="logins layui-btn layui-btn-normal <notempty name='login.am_in' > layui-btn-disabled</notempty>"
                                        data="am_in">上午签到 {$login.am_in|default='--:--'}
                                </button>
                                <button type="button"
                                        class="logins layui-btn layui-btn-normal <notempty name='login.am_out' > layui-btn-disabled</notempty>"
                                        data="am_out">上午签退 {$login.am_out|default='--:--'}
                                </button>
                            </div>

                            <div class="layui-btn-group">
                                <button type="button"
                                        class="logins layui-btn layui-btn-normal <notempty name='login.fm_in' > layui-btn-disabled</notempty>"
                                        data="fm_in">下午签到 {$login.fm_in|default='--:--'}
                                </button>
                                <button type="button"
                                        class="logins layui-btn layui-btn-normal <notempty name='login.fm_out' > layui-btn-disabled</notempty>"
                                        data="fm_out">下午签退 {$login.fm_out|default='--:--'}
                                </button>
                            </div>
                            <div class="layui-btn-group">
                                <button type="button"
                                        class="layui-btn layui-btn-normal layui-btn-warm  ajax-form"
                                        data-url="{:url('add_no_time')}">请假
                                </button>

                            </div>
                        </div>
                    </div>

                    <div class="layui-row layui-col-space10" >
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <div class="layui-row">
                                        <div class="layui-col-md6">
                                            <div id="finish" style="height:320px;margin:0 auto;"></div>
                                        </div>
                                        <div class="layui-col-md6">
                                            <div id="postpone" style="height:320px;margin:0 auto;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <div id="mwork" style="height:320px;margin:0 auto;"></div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">工作概况</div>
                                <div class="layui-card-body">
                                    <div id="container" style="height:265px;margin:0 auto;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card">
                                <div class="layui-card-header">最近放假日期</div>
                                <div class="layui-card-body">
                                    <table id="festival" lay-filter="festival"
                                           list-url="{:url('festivallists')}">
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md2">
                            <div class="layui-card">
                                <div class="layui-card-header"><i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #5FB878;"></i>项目微信公众号</div>
                                <div class="layui-card-body ">
                                    <img src="{$wxqrcode|default=''}" width="200" ><br>
                                    <blockquote class="layui-elem-quote layui-quote-nm">
                                        扫码关注项目微信公众号<br>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md2">
                            <div class="layui-card">
                                <div class="layui-card-header"><i class="layui-icon layui-icon-login-wechat" style="font-size: 20px; color: #5FB878;"></i>  绑定微信</div>
                                <div class="layui-card-body ">
                                            <img src="" width="200" id="qrcode"><br>
                                    <blockquote class="layui-elem-quote layui-quote-nm">
                                        绑定微信及时收到项目信息<br>
                                    </blockquote>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <table class="layui-table text-center" id="list" lay-filter="list"
                                           list-url="{:url('storieslist')}"
                                    ></table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
</block>
<block name="script">
    <link href='https://cdn.weibuyun.com/static/admin/fullcalendar/core/main.min.css' rel='stylesheet'/>
    <link href='https://cdn.weibuyun.com/static/admin/fullcalendar/daygrid/main.min.css' rel='stylesheet'/>
    <link href='https://cdn.weibuyun.com/static/admin/fullcalendar/timegrid/main.min.css' rel='stylesheet'/>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/core/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/timegrid/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/interaction/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/daygrid/main.min.js'></script>
    <script src='https://cdn.weibuyun.com/static/admin/fullcalendar/core/locales/zh-cn.js'></script>
    <script>
        layui.use(['element', 'table', 'form', 'util'], function () {
            var table = layui.table
                , element = layui.element
                , util = layui.util
                ,$=layui.$
                , form = layui.form;
            element.init();
            var uid = 0;
            qrcode()
            var myVar = setInterval(qrcode, 7000);

            function qrcode() {
                $.ajax({
                    url: '{:url("/info/qrcode")}',
                    type: 'POST',
                    dataType: 'json'
                })
                    .done(function (res) {
                        if (res.code == 0) {
                            $('#qrcode').attr('src', res.url);
                        } else {
                            window.location.href = res.url
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            offset: 'rt',
                            anim: 5
                        });
                    })
                    .always(function () {
                    });
            }
            var fdom = document.getElementById("finish");
            var fmyChart = echarts.init(fdom, 'light');
            var pdom = document.getElementById("postpone");
            var pmyChart = echarts.init(pdom, 'light');
            var mdom = document.getElementById("mwork");
            var mmyChart = echarts.init(mdom, 'light');
            function getfinish() {
                $.ajax({
                    url: "{:url('getfinish')}",
                    type: 'get',
                    dataType: 'json',
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            //需求完成情况
                            option = {
                                title: {
                                    text: '需求完成情况',
                                    left: 'center',
                                    top: 10,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                color: ['#009688', '#FFB800', '#FF5722', '#01AAED', '#2F4056', '#5FB878', '#393D49'],
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    type: 'scroll',
                                    orient: 'vertical',
                                    right: 10,
                                    top: 20,
                                    bottom: 20,
                                    data: ['完成', '未完成'],
                                },
                                series: [
                                    {
                                        name: '需求完成情况',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['40%', '50%'],
                                        data: [
                                            {value: res.data.f.ok, name: '完成'},
                                            {value: res.data.f.n, name: '未完成'}
                                        ],
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            //缺陷完成情况
                            option2 = {
                                title: {
                                    text: '缺陷完成情况',
                                    left: 'center',
                                    top: 10,
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },

                                color: ['#009688', '#FFB800', '#FF5722', '#01AAED', '#2F4056', '#5FB878', '#393D49'],
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    type: 'scroll',
                                    orient: 'vertical',
                                    right: 10,
                                    top: 20,
                                    bottom: 20,
                                    data: ['完成', '未完成'],
                                },
                                series: [
                                    {
                                        name: '缺陷完成情况',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['40%', '50%'],
                                        data: [
                                            {value: res.data.p.ok, name: '完成'},
                                            {value: res.data.p.n, name: '未完成'}
                                        ],
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                            var base_time = [];
                            var p_time = [];
                            var w_time = [];
                            var out_time = [];
                            var m_time = [];
                            $.each(res.data.mwork, function (i, n) {
                                base_time.push(n.base_time);
                                p_time.push(n.p_time);
                                w_time.push(n.w_time);
                                out_time.push(n.out_time);
                                m_time.push(n.m_time);
                            });
                            //月时间效率
                            option3 = {
                                title: {
                                    text: '月时间效率',
                                    textStyle: {
                                        color: '#ccc'
                                    }
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross',
                                        label: {
                                            backgroundColor: '#6a7985'
                                        }
                                    }
                                },
                                legend: {
                                    data: ['月工作基数', '计划时间', '工作时间', '超时时间']
                                },

                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: m_time
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '月工作基数',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {},
                                        data: base_time
                                    },
                                    {
                                        name: '计划时间',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {},
                                        data: p_time
                                    },
                                    {
                                        name: '工作时间',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {normal: {}},
                                        data: w_time
                                    },
                                    {
                                        name: '超时时间',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {normal: {}},
                                        data: out_time
                                    }
                                ]
                            };
                            fmyChart.setOption(option, true);
                            pmyChart.setOption(option2, true);
                            mmyChart.setOption(option3, true);
                            element.render('tab');
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });

            }
            getfinish();

            element.on('tab(projecttab)', function () {
                switch (Number(this.getAttribute('lay-id'))) {
                    case 1:

                        break;
                    case 2:
                        table.render({
                            elem: '#list'
                            , url: "{:Url('storieslists')}"
                            , page: false
                            , loading: true
                            , limit: 20
                            , cols: [[
                                {field: 'title', title: '名称'}
                                , {field: 'model_id', width: 85, title: '类型'}
                                , {field: 'e_time', width: 85, title: '结束时间'}
                                , {field: 'p_time', width: 100, title: '计划分钟'}
                            ]]
                        });
                        break;
                    case 3:
                        calendar.render();
                        break;
                    default:
                }
            });
            $('.logins').click(function () {
                //initFullCalendar($(this).attr('uid'));
                var obj = this;

                if ($(obj).is('.layui-btn-disabled')) {
                    layer.msg('已经提交过', {
                        time: 1500,
                        icon: 5
                    });
                    return;
                }
                $.ajax({
                    url: "{:url('savelogin')}",
                    type: 'get',
                    dataType: 'json',
                    data: {
                        data: $(obj).attr('data')

                    }
                })
                    .done(function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            layer.msg(res.msg, {
                                time: 1500,
                                icon: 1
                            });
                            $(obj).addClass('layui-btn-disabled');
                            $(obj).html(res.data);

                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });
            });
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid', 'timeGrid'],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,dayGridDay'
                },
                // defaultDate: '2019-06-12',
                navLinks: true, // can click day/week names to navigate views
                //允许用户通过点击或拖动选择日历中的对象
                //selectable: true,
                locale: 'zh-cn',
                //selectMirror: true,
                //editable: true,
                //eventLimit: true,
                //绑定一个mothod,在点击日历时可以弹出页面
                //点击添加的事件触发的方法
                //进入日历界面进行加载添加过的数据
                events: function (fetchInfo, successCallback, failureCallback) {
                    console.log('====');
                    console.log(fetchInfo);
                    console.log('====');

                    var events = [];
                    $.ajax({
                        url: "{:url('getcalendar')}",
                        type: 'post',
                        dataType: 'json',
                        data: {
                            start: fetchInfo.startStr,
                            end: fetchInfo.endStr,
                            uid: uid
                        }
                    })
                        .done(function (res) {
                            if (res.data == null) {
                                layer.msg('没有内容', {
                                    time: 1500,
                                    icon: 5
                                });
                            } else {
                                if (res.nickname) {
                                    $('.titleright').html('开发名称' + res.nickname)
                                } else {
                                    $('.titleright').html('')
                                }
                                $.each(res.data, function (i, j) {
                                    switch (j.status) {
                                        case 1:
                                        case 2:
                                            cl = '#c2c2c2'
                                            break;
                                        case 3:
                                        case 4:
                                            cl = '#1E9FFF'
                                            break;
                                        case 5:
                                            cl = '#5FB878'
                                            break;
                                        default:
                                            cl = '#2F4056'
                                            break;

                                    }
                                    events.push({
                                        title: j.title,
                                        start: j.start,           // will be parsed
                                        end: j.end,
                                        color: cl
                                    });
                                })
                                console.log(events);
                                //回调渲染日历
                                successCallback(events);
                            }
                        })
                        .fail(function () {
                            layer.msg('服务器异常', {
                                time: 1500,
                                icon: 5
                            });
                        })
                        .always(function () {

                        });
                }
            });
            $('.workcalendar').click(function () {
                //initFullCalendar($(this).attr('uid'));
                uid = $(this).attr('uid');
                calendar.refetchEvents();
            });
            //放假
            table.render({
                elem: '#festival'
                , url: "{:Url('festivallists')}"
                , page: {
                    layout: ['prev', 'next'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    , groups: 1 //只显示 1 个连续页码
                    , prev: '上一页'
                    , next: '下一页'
                }
                , height: 240
                , limit: 4
                , text: '最近的假期还没有添加'
                , cols: [[
                    {field: 'd_time', width: 130, title: '节假日期'}
                    , {field: 'info', title: '节假日名称'}
                ]]
            });
            //工作概况
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom, 'light');
            var page = 1;
            var xAxisData = [];
            var model_1 = [];
            var model_2 = [];
            var model_3 = [];
            var w_time = [];
            var option = [];
            var firstpage = 1;
            getworkusertimeinfo(page)
            setInterval(function () {
                firstpage = 10;
                // myChart.clear();
                xAxisData.shift();
                model_1.shift();
                model_2.shift();
                model_3.shift();
                w_time.shift();
                if (page == 30) {
                    page = 1;
                } else {
                    page = page + 1;
                }
                getworkusertimeinfo(page)

            }, 7000)

            function getworkusertimeinfo(page) {

                $.ajax({
                    url: "{:url('work_user_time')}" + '?page=' + page + '&firstpage=' + firstpage,
                    type: 'get',
                    dataType: 'json',
                })
                    .done(function (res) {
                        if (res.data == null) {
                            layer.msg('没有内容', {
                                time: 1500,
                                icon: 5
                            });
                        } else {
                            $.each(res.data, function (i, n) {
                                xAxisData.push(n.c_time);
                                model_1.push(n.model_1);
                                model_2.push(n.model_2);
                                model_3.push(n.model_3);
                                w_time.push(n.w_time);
                            });

                            option = {
                                color: ['#009688', '#FFB800', '#FF5722', '#01AAED', '#2F4056', '#5FB878', '#393D49'],
                                legend: {
                                    data: ['需求', '缺陷', '迭代', '实际时间'],
                                    align: 'left'
                                },
                                tooltip: {},
                                xAxis: {
                                    data: xAxisData,
                                    silent: false,
                                    splitLine: {
                                        show: false
                                    }
                                },
                                yAxis: {},
                                series: [{
                                    name: '需求',
                                    type: 'bar',
                                    data: model_1,
                                    animationDelay: function (idx) {
                                        return idx * 10 + 100;
                                    }
                                }, {
                                    name: '缺陷',
                                    type: 'bar',
                                    data: model_2,
                                    animationDelay: function (idx) {
                                        return idx * 10;
                                    }
                                }, {
                                    name: '迭代',
                                    type: 'bar',
                                    data: model_3,
                                    animationDelay: function (idx) {
                                        return idx * 10;
                                    }
                                }, {
                                    name: '实际时间',
                                    type: 'bar',
                                    data: w_time,
                                    animationDelay: function (idx) {
                                        return idx * 10 + 100;
                                    }
                                }],
                                animationEasing: 'elasticOut',
                                animationDelayUpdate: function (idx) {
                                    return idx * 5;
                                }
                            };

                            myChart.setOption(option, true);
                        }
                    })
                    .fail(function () {
                        layer.msg('服务器异常', {
                            time: 1500,
                            icon: 5
                        });
                    })
                    .always(function () {

                    });

            }

        });
    </script>
</block>